<template>
	<view class="content">
		<view class="wrap">


			<view class="jinbg">
				<image :src="'/images/tbga.png' | formatImgUrl" class="bg" mode=""></image>
				<view class="nei">
					<view class="top" v-if="userInfo.is_writer==1">
						<view class="title">
							 账户佣金(RMB)
						</view>
						<view class="wenbox">
							<image :src="'/images/wen.png' | formatImgUrl" class="wenpic" mode="" @click="xianshow"></image>
							<view class="tannei" v-if="xian">
								账户佣金为可提现佣金和未到账佣金的总和
								<div class="san"></div>
							</view>
						</view>
					</view>
					
					<view class="top" v-if="userInfo.is_writer==0">
						<view class="title">
							 粮币余额
						</view>
						<view class="wenbox">
							<image :src="'/images/wen.png' | formatImgUrl" class="wenpic" mode="" @click="xianshow"></image>
							<view class="tannei" v-if="xian">
								账户佣金为可提现佣金和未到账佣金的总和
								<div class="san"></div>
							</view>
						</view>
					</view>
					
					<view class="yue" v-if="userInfo.is_writer==1">
						￥{{userInfo.with_month}}
					</view>
					<view class="yue" v-if="userInfo.is_writer==0">
						￥{{userInfo.wallet}}
					</view>
					
					<view class="kebox">
						<view class="keli">
							<view class="ketitle">
								佣金总记录
							</view>
							<view class="ketxt">
								{{userInfo.commission}}元
							</view>
						</view>
						<view class="keli" v-if="userInfo.is_writer==1">
							<view class="ketitle">
								粮币余额
							</view>
							<view class="ketxt">
								{{userInfo.wallet}}币
							</view>
						</view>
						
						<view class="keli" v-if="userInfo.is_writer==0">
							<view class="ketitle">
								<!-- 粮币余额 -->
								账户佣金(RMB)
							</view>
							<view class="ketxt">
								暂未开放
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="tibox">
				<view class="tili" @click="go_tixian()" v-if="userInfo.is_writer">
					<image :src="'/images/tbgb.png' | formatImgUrl" class="tipic" mode=""></image>
					<view class="titxt">
						提现
					</view>
				</view>
				<view class="tili" @click="$go('/pages/user/coin?type=2')" v-if="userInfo.is_writer">
					<image :src="'/images/tbgb.png' | formatImgUrl" class="tipic" mode=""></image>
					<view class="titxt">
						兑换
					</view>
				</view>
				<view class="tili" :class="{'tiliactive' : !userInfo.is_writer}" @click="$go('/pages/user/coin?type=1')">
					<image :src="'/images/tbgb.png' | formatImgUrl" class="tipic" mode=""></image>
					<view class="titxt">
						充值
					</view>
				</view>
				<view class="tili" :class="{'tiliactive' : !userInfo.is_writer}" @click="$go('/pages/user/bill')">
					<image :src="'/images/tbgb.png' | formatImgUrl" class="tipic" mode=""></image>
					<view class="titxt">
						账单
					</view>
				</view>
			</view>
		</view>
		<view class="topli">
			<view v-for="item in navList" class="toptxt" :class="{'active': item.id == navIndex}" @click="navTap(item)">
				{{item.name}}
				<view class="line"></view>
			</view>
		</view>
		
		<view class="main">
			<view class="empytView" v-if="!couponList.length">
				<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
				<!-- <view>- 空列表 -</view> -->
			</view>
			
			<view class="youbg" v-for="item in couponList">
				<image :src="'/images/youbg.png' | formatImgUrl" class="youpic" mode=""></image>
				<view class="wenben">
					<view class="youleft" @click="$go('/pages/user/coupon?id='+item.id)">
					<!-- <view class="youleft" > -->
						<view class="yltop">
							<view class="yline"></view>
							<view class="yltitle">
								{{item.coupon.title}}券
							</view>
							<view class="yitxt">
								有效期 {{$options.filters.parseTime(item.validity,'{y}-{m}-{d}') }}
							</view>
						</view>
						<view class="mantxt">
							{{item.coupon.price}}币<text>约稿红包</text>
						</view>
						<view class="shaotxt oneline">
							{{item.coupon.des}}
						</view>
					</view>
					<view class="youtxt">
						{{item.status?'已使用':'待使用'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	export default {
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				navIndex: 1,
				couponList:[],
				xian:false,
				// 点击切换
				navList: [{
					id: 1,
					name: '可使用'
				}, {
					id: 2,
					name: '待生效'
				}, {
					id: 3,
					name: '已使用'
				}, {
					id: 4,
					name: '已生效'
				}],
				
			}
		},
		onLoad() {
			let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
		},
		onShow() {
				this.getUserInfo()
				this.getCouponList()
		},
		
		methods: {
			go_tixian(){
				if(this.userInfo.is_auth==1){
					uni.navigateTo({
						url: '/pages/user/withdrawal'
					})
				}else{
					
					this.$common.errorToShow("请先实名认证")
					
					
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/user/auth'
						})
						
					}, 500); 
					
				}
				
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo',{},'POST',false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
					}
				})
			},
			getCouponList(){
				this.$api.default.request('user/getCouponList',{type:this.navIndex}).then((res) => {
					if (res.code) {
						this.couponList = res.data
					}
				})
			},
			// 点击切换
			navTap(item) {
				this.navIndex = item.id
				this.getCouponList()
			},
			
			xianshow(){
				this.xian = !this.xian
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		.wrap {
			padding: 20rpx 30rpx 0;
			.jinbg {
				border-radius: 0;
				position: relative;
				width: 100%;
				height: 314rpx;
				margin-bottom: 20rpx;

				.bg {
					width: 100%;
					height: 314rpx;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
				}

				.nei {
					padding: 30rpx 30rpx 0;
					position: relative;
					z-index: 2;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							font-size: 28rpx;
							font-weight: bold;
							color: #3D3D3D;
						}
						.wenbox{
							position: relative;
							.wenpic {
								width: 32rpx;
								height: 32rpx;
							}
							.tannei{
								position: absolute;
								right: -10rpx;
								top: 46rpx;
								padding: 0 10rpx;
								height: 36rpx;
								border-radius: 4px;
								line-height: 36rpx;
								font-size: 20rpx;
								color: #ffffff;
								white-space: nowrap;
								background: rgba(0, 0, 0, 0.4);
								.san{
									width: 0;
								  height: 0;
								  border-top: 8rpx solid transparent;
								  border-left: 16rpx solid rgba(0, 0, 0, 0.4);
								  border-bottom: 8rpx solid transparent;
									position: absolute;
									top: -12rpx;
									right: 14rpx;
									transform: rotate(30deg);
								}
							}
						}
						
					}

					.yue {
						font-size: 60rpx;
						padding-bottom: 74rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						line-height: 86rpx;
					}

					.kebox {
						display: flex;
						align-items: center;

						.keli {
							width: 50%;

							.ketitle {
								font-size: 20rpx;
								font-weight: 300;
								letter-spacing: 0em;
								color: #3D3D3D;
							}

							.ketxt {
								font-size: 28rpx;
								font-weight: bold;
								letter-spacing: 0em;
								line-height: 40rpx;
								color: #3D3D3D;
							}
						}
					}
				}
			}

			.tibox {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.tili:last-child{
					margin-right: 0;
				}
				
				.tili {
					width: 150rpx;
					height: 122rpx;
					overflow: hidden;
					border-radius: 4px;
					position: relative;
					margin-right: 30rpx;
					.tipic {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 122rpx;
						z-index: 1;
					}

					.titxt {
						font-size: 36rpx;
						font-weight: bold;
						letter-spacing: 0.08em;
						color: #3D3D3D;
						position: relative;
						z-index: 2;
						text-align: center;
						line-height: 122rpx;
					}
				}
				.tiliactive{
					width: 49% !important;
				}
			}
		}

		.topli {
			background-color: #ffffff;
			height: 74rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			.toptxt {
				width: 25%;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}

			.active {
				font-weight: bold;
				color: #3d3d3d;
			}
		}
		.main{
			padding: 0 30rpx;
			.youbg {
				width: 690rpx;
				height: 238rpx;
				margin-bottom: 30rpx;
				position: relative;
				box-shadow: 0px 8rpx 20rpx 0px rgba(61, 61, 61, 0.15);
				.youpic {
					width: 100%;
					height: 238rpx;
				}
			
				.wenben {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 238rpx;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
			
					.youleft {
						width: 608rpx;
						padding-left: 20rpx;
						flex-shrink: 0;
			
						.yltop {
							display: flex;
							align-items: center;
							height: 68rpx;
			
							.yline {
								width: 4rpx;
								height: 28rpx;
								border-radius: 84px;
								opacity: 1;
								background: #45C4B0;
							}
			
							.yltitle {
								font-size: 28rpx;
								font-weight: 500;
								color: #3D3D3D;
								padding-left: 12rpx;
							}
							.yitxt{
								flex-grow: 1;
								font-size: 20rpx;
								font-weight: normal;
								text-align: right;
								letter-spacing: 0em;
								color: #999999;
								padding-right: 34rpx;
							}
						}
			
						.mantxt {
							padding: 20rpx 0 10rpx;
							font-size: 48rpx;
							color: #45C4B0;
			
							text {
								font-size: 48rpx;
								color: #3d3d3d;
							}
						}
			
						.shaotxt {
							font-size: 28rpx;
							font-weight: 300;
							color: #999999;
						}
					}
			
					.youtxt {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						width: 60rpx;
						text-align: center;
						line-height: 40rpx;
						letter-spacing: 5rpx;
						padding-top: 60rpx;
					}
				}
			}
		}
	}
</style>